<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a
			{
				display: block;
			}
			/* 不是块元素，没办法设置height*/
			/* span   
			{
				display: block;
				height: 20px;
			} */
			.collapsed
			{
				height: 20px;
			}
			
		</style>
		<script type="text/javascript">
			window.onclick=function()
			{
				function hasClass(obj,cn)            //判断是否有cn这个class属性
				{
					var reg=new RegExp("\\b"+cn+"\\b");   //cn是什么reg就是什么
					return reg.test(obj.className);    //判断className里面是否有reg也就是是否有cn
				}
				function addClass(obj,cn)
				{
					if(!hasClass(obj,cn))
					{
						obj.className+=" "+cn;
					}
				}
				function removeClass(obj,cn)   //直接删除就好了，而不用判断是否有，有也删，无也删除
				{
					var reg=new RegExp("\\b"+cn+"\\b");    //前面为空 后面也为空
					obj.className=obj.className.replace(reg,"");
				}
				function toggleClass(obj,cn)
				{
					if(hasClass(obj,cn))
					{
						removeClass(obj,cn)
					}
					else
					{
						addClass(obj,cn);
					}
				}
				var span=document.querySelectorAll(".menuSpan");
		
				for(var i=0;i<span.length;i++)
				{
					span[i].onclick=function()
					{
						var divdiv=this.parentNode;
						toggleClass(divdiv,"collapsed");
					}
				}
			}
			
		</script>
	</head>
	<body>
		<div id="my_menu" class="sdmenu">
			<div class="menuSpan">
				<span >在线工具</span>
				<a href="">图像优化</a>
				<a href="">收藏夹图标生成器</a>
				<a href="">邮件</a>
				<a href="">htaccess密码</a>
				<a href="">梯度图像</a>
				<a href="">按钮生成器</a>
			</div>
			<div class="collapsed">
				<span>支持我们</span>
				<a href="">推荐我们</a>
				<a href="">链接我们</a>
				<a href="">网络资源</a>
			</div>
			<div  class="collapsed">
				<span>合作伙伴</span>
				<a href="">javaScript</a>
				<a href="">CSS驱动</a>
				<a href="">CodingForums</a>
				<a href="">CSS例子</a>
			</div>
			<div  class="collapsed">
				<span>测试电流</span>
				<a href="">Current or not</a>
				<a href="">Current or not</a>
				<a href="">Current or not</a>
				<a href="">Current or not</a>
			</div>
		</div>
		
	</body>
</html>